<span ng-show="!model.editing">
  <span ng-if="status === undefined">{{spec}} replica<span ng-if="spec !== 1">s</span></span>
  <span ng-if="status !== undefined">{{status}} current / {{spec}} desired</span>
  <a href=""
    title="Edit"
    class="action-button"
    ng-if="!disableScaling && scaleFn && (deployment | canIScale)"
    ng-click="model.desired = spec; model.editing = true">
    <i class="pficon pficon-edit mar-left-sm"></i>
    <span class="sr-only">Edit</span>
  </a>
</span>
<span ng-show="!disableScaling && model.editing">
  <form name="form.scaling" ng-submit="scale()" class="form-inline" novalidate>
    <span ng-class="{'has-error': form.scaling.$invalid}">
      <input type="number"
             name="desired"
             ng-model="model.desired"
             ng-required="true"
             min="0"
             pattern="\d*"
             focus-when="{{model.editing}}"
             select-on-focus
             class="input-number">
    </span>
    <a href=""
       title="Scale"
       class="action-button"
       ng-attr-aria-disabled="{{form.scaling.$invalid ? 'true' : undefined}}"
       ng-click="scale()"
       role="button">
      <i class="fa fa-check" style="margin-left: 5px;"></i>
      <span class="sr-only">Scale</span>
    </a>
    <a href="" title="Cancel" class="action-button" ng-click="cancel()" role="button">
      <i class="fa fa-times" style="margin-left: 5px;"></i>
      <span class="sr-only">Cancel</span>
    </a>
    <div ng-if="form.scaling.$invalid" class="has-error">
      <div ng-if="form.scaling.desired.$error.required" class="help-block">
        A value for replicas is required.
      </div>
      <div ng-if="form.scaling.desired.$error.pattern" class="help-block">
        Replicas must be a whole number.
      </div>
      <div ng-if="form.scaling.desired.$error.min" class="help-block">
        Replicas can't be negative.
      </div>
    </div>
  </form>
</span>
